.permission-container {
  .permission-layout {
    display: flex;
    gap: 20px;
    
    .role-panel, .permission-panel {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      
      .panel-header {
        padding: 10px 16px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          margin: 0;
          font-size: 16px;
        }
      }
    }
    
    .role-panel {
      width: 220px;
      flex-shrink: 0;
      
      .role-list {
        padding: 10px 0;
        
        .role-item {
          padding: 8px 16px;
          cursor: pointer;
          
          &:hover {
            background-color: #f5f5f5;
          }
          
          &.active {
            background-color: #e6f7ff;
            color: #1890ff;
            border-right: 3px solid #1890ff;
          }
        }
      }
    }
    
    .permission-panel {
      flex-grow: 1;
      
      .permission-tree {
        padding: 16px;
      }
    }
  }
} 
